const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
  entry: ['./src/index.js', './src/add.js'], // 打包成单个js,适用于比如react全家桶
  // entry: { index: './src/index.js', add: './src/add.js' }, // 打包成多个js
  output: {
    // 文件名称(指定名称+目录)
    filename: 'js/[name]_[contenthash:10].js',
    path: `${__dirname}/build`,
    // 所有输出资源的公共路径前缀 -->'imgs/a.jpg'==>'/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名字
    /*
     暴露库使用
    library: '[name]', // 暴露变量
    libraryTarget: 'window', // global commonjs
    */
  },
  module: {
    rules: [
      // loader配置
      {
        test: /\.css$/,
        // 多个loader用use单个用loaser
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|build)/,
        // 只检查src下的文件
        include: `${__dirname}/src`,
        enforce: 'pre',
        // 延后
        // enforce:'post'
        loader: 'eslint-loader',
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  // 生产环境做的优化
  optimization: {
    splitChunks: {
      chunks: 'all',

      /*    都是默认值,很少修改
       minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSize: 0, // 最大无限制
      minChunks: 1, // 要提取的chunk最少被引用一次
      maxAsyncRequests: 5, // 按需加载时候并行加载的文件最大数量
      maxInitialRequest: 3, // 入口js 文件最大并行请求数
      automaticNameDelimiter: '~', // 名称连接符
      name: true, // 可以使用命名规则
      cacheGroups: {
        // 分割chunk的组
        // node_modules文件会被打包到vendors组的chunk忠 ==>vendors~xxx.js
        // 满足上面的公共规则:'如大小超过30kb
        vendors: {
          test: /[\\/]node_modules[\\/]/,

          // 优先级
          priority: -10,
        },
        default: {
          minchunk: 2,
          priority: -20,
          // 如果当前要打包的模块,和之前已经被提取的模块是同一个,就会复用
          reuseExistingChunk: true,
        },
      }, */
    },
    // 将当前模块记录hash单独打包为一个文件里 runtime
    // 解决: 修改a文件导致b文件的contenthash变化
    runtimeChunk: {
      name: (entrypoint) => `runtime-${entrypoint.name}`,
    },
    minimizer: [
      // 配置生产环境的压缩放:js和css
      new TerserWebpackPlugin({
        // 开启缓存
        catch: true,
        // 多进程打包
        parallel: true,
        //
        sourceMap: true,
      }),
    ],
  },
}
